<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>填写核对订单信息</title>
    <link rel="stylesheet" href="style/base.css" type="text/css">
    <link rel="stylesheet" href="style/global.css" type="text/css">
    <link rel="stylesheet" href="style/header.css" type="text/css">
    <link rel="stylesheet" href="style/fillin.css" type="text/css">
    <link rel="stylesheet" href="style/footer.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/cart2.js"></script>


</head>
<body>
<div id="app">
    <!-- 顶部导航 start -->
    <topnav_topnav></topnav_topnav>
    <!-- 顶部导航 end -->

    <div style="clear:both;"></div>

    <!-- 页面头部 start -->
    <div class="header w990 bc mt15">
        <div class="logo w990">
            <h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城商城"></a></h2>
            <div class="flow fr flow2">
                <ul>
                    <li>1.我的购物车</li>
                    <li class="cur">2.填写核对订单信息</li>
                    <li>3.成功提交订单</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 页面头部 end -->

    <div style="clear:both;"></div>

    <!-- 主体部分 start -->
    <div class="fillin w990 bc mt15">
        <div class="fillin_hd">
            <h2>填写并核对订单信息</h2>
        </div>

        <div class="fillin_bd">
            <!-- 收货人信息  start-->
            <flow_address></flow_address>
            <!-- 收货人信息  end-->

            <!-- 配送方式 start -->
            <flow_delivery></flow_delivery>
            <!-- 配送方式 end -->

            <!-- 支付方式  start-->
            <flow_pay></flow_pay>
            <!-- 支付方式  end-->

            <!-- 发票信息 start-->
            <flow_receipt></flow_receipt>
            <!-- 发票信息 end-->

            <!-- 商品清单 start -->
            <div class="goods">
                <h3>商品清单</h3>
                <table>
                    <thead>
                    <tr>
                        <th class="col1">商品</th>
                        <th class="col2">规格</th>
                        <th class="col3">价格</th>
                        <th class="col4">数量</th>
                        <th class="col5">小计</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="cart in carts">
                        <td class="col1"><a :href="'goods.html?id='+cart.skuid"><img :src="cart.midlogo" alt=""/></a>
                            <strong><a
                                    :href="'goods.html?id='+cart.skuid">{{cart.goods_name}}[{{cart.spec_info}}]</a></strong>
                        </td>
                        <td class="col2">
                            <p v-for="p in cart.spec_info.split(':')">{{p}}</p>
                        </td>
                        <td class="col3">{{cart.price}}</td>
                        <td class="col4"> {{cart.count}}</td>
                        <td class="col5"><span>{{cart.price*cart.count}}</span></td>
                    </tr>

                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="5">
                            <ul>
                                <li>
                                    <span>{{orderCont}} 件商品，总商品金额：</span>
                                    <em>{{allPrice}}</em>
                                </li>
                                <li>
                                    <span>返现：</span>
                                    <em>-￥240.00</em>
                                </li>
                                <li>
                                    <span>运费：</span>
                                    <em>￥10.00</em>
                                </li>
                                <li>
                                    <span>应付总额：</span>
                                    <em>￥5076.00</em>
                                </li>
                            </ul>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <!-- 商品清单 end -->

        </div>

        <div class="fillin_ft">
            <a href="" @click.prevent="submit"><span>提交订单</span></a>
            <p>应付总额：<strong>￥5076.00元</strong></p>

        </div>
    </div>
    <!-- 主体部分 end -->

    <div style="clear:both;"></div>
    <!-- 底部版权 start -->
    <topnav_bottom></topnav_bottom>
    <!-- 底部版权 end -->
</div>

<script src="js/vue.js"></script>
<script src="js/axios-min.js"></script>
<script src="js/mock-min.js"></script>
<script src="js/api.js"></script>
<script src="js/mock.js"></script>
<script src="components/topnav.js"></script>
<script src="components/flow2.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            orderFrom: {
                address_id: "收货人地址ID",
                post_method: "送货方式",
                pay_method: "支付方式",
                invoice: {
                    type: "发票类型",
                    company: "单位"
                }
            },
            carts: [],
            sn: "",

        },

        created() {
            getCarts().then(res => {
                this.carts = res.data.data
            })
        },
        methods: {
            submit() {
                AddOrders(this.orderFrom).then(res => {
                    this.sn = res.data.sn
                    return Pay(this.sn)
                }).then(res => {
                    if (res.data.errno == 1) {
                        location.href = "payFail.html"
                    } else {
                        sessionStorage.setItem("url", res.data.wxurl)
                        location.href = "flow3.html"

                    }

                })
            }

        },
        computed: {
            // 动态总价
            allPrice: function () {
                var Leclass = 0
                for (i in  this.carts) {
                    cart = this.carts[i]
                    Leclass = Leclass + cart.count * cart.price
                }
                return Leclass
            },
            orderCont: function () {
                var Leclass = 0
                for (i in  this.carts) {
                    cart = this.carts[i]
                    Leclass = Leclass + cart.count
                }
                return Leclass
            }

        },
    })
</script>
</body>
</html>
